<template>
	<view class="hamal_box">
		<view class="uls">
			<view class="lis" style="-webkit-flex: 1;flex: 1;">
				<!--   -->
				<view class="dy" v-for="(item,index) in list" :key="index">
					<view class="bos">
						<span>{{item.contacts.slice(0,1)}}**</span><span>{{item.telephone.slice(0,3)}}***{{item.telephone.slice(7)}}</span>
					</view>
					<view class="ddxx">
						<view class="xx_lef">
							<view><span>重量≈{{item.number}}斤</span><span>单价：{{item.price}}元</span></view>
							<view v-if="item.loading_and_unloading_type == 2">卸车地址：{{item.remarks}}</view>
							<view v-if="item.loading_and_unloading_type == 2">卸车时间：{{item.takes_time}}</view>
							<view v-if="item.loading_and_unloading_type == 1">装车地址：{{item.remarks}}</view>
							<view v-if="item.loading_and_unloading_type == 1">装车时间：{{item.takes_time}}</view>
						</view>
						<view class="xx_rig">
							<view @click="robFn(item)">
								抢单
							</view>
						</view>
					</view>
					<view class="ddzt ddzt_xc" v-if="item.loading_and_unloading_type == 2">
						卸车单
					</view>
					<view class="ddzt ddzt_zc" v-if="item.loading_and_unloading_type == 1">
						装车单
					</view>
				</view>
			</view>
			<view class="list_bots" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import { queryWaiting,orderGrabbing } from '@/utils/api.js';
	export default {
		data() {
			return {
				
				
				hamalId:0,
				// 搬运工数据
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				// 最大值
				max: 5,
				// 页数
				current:1,
				// 每页数量
				pageSize:10
			}
		},
		onLoad(e) {
			this.hamalId=e.id
			this.initData();
		},
		// 监听页面卸载
		onUnload() {
			this.max = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.current=1,
			this.pageSize=10
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			console.log("onReachBottom");
			if (this.loadMoreText=='没有更多了!') {
				this.loadMoreText = "没有更多了!"
				return;
			}
			this.showLoadMore = true;
			this.current+=1
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		computed:{
			
		},
		methods: {
			// 获取搬运工数据
			initData(){
				// 获取搬运工数据
				queryWaiting({
					current:this.current,
					pageSize:this.pageSize
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						this.list=res.data
						if(this.list.length < 10){
							this.showLoadMore = true;
							this.loadMoreText = "没有更多了!"
						}
						uni.stopPullDownRefresh();
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 下拉加载数据
			setListData() {
				let data = [];
				// 获取店铺数据
				queryWaiting({
					current:this.current,
					pageSize:this.pageSize
				}).then((res) => {
				    if (res.code === 200) {
				      // console.log(res);
					  data=res.data
					  if(data.length == 0){
					  		this.current-=1
					  		this.showLoadMore = true;
					  		this.loadMoreText = "没有更多了!"
					  		return
					  }else if(data.length < 10){
					  	this.showLoadMore = true;
					  	this.loadMoreText = "没有更多了!"
					  }
					  this.list = this.list.concat(data);
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 抢单
			robFn(item){
				console.log(item);
				uni.showLoading()
				orderGrabbing({
					porterId:this.hamalId,
					orderNumber:item.order_number
				}).then((res) => {
					uni.hideLoading();
				    if (res.code === 200) {
						uni.showToast({title:"抢单成功", position: 'bottom',icon:'none'})
						setTimeout(() => {
							uni.redirectTo({
								url: 'byg_waybill?id='+this.hamalId
							});
						}, 1000);
						
				    } else {
						uni.showToast({title:res.message, position: 'bottom',icon:'none'})
				    }
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
				});
			}
			
		}
	}
</script>

<style scoped lang="scss">
		.hamal_box{
			.uls{
				padding: 10px;
				.lis{
					.dy{
						height: 120px;
						padding: 10px 15px;
						margin-bottom: 10px;
						background: #FFFFFF;
						border-radius: 20px;
						position: relative;
						.bos{
							font-size: 18px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: $mainText;
							line-height: 40px;
							span:nth-child(2){
								font-size: 15px;
								font-weight: 400;
								color: $text;
								margin-left: 10px;
							}
						}
						.ddxx{
							height: 80px;
							display: flex;
							.xx_lef{
								width: 70%;
								font-size: 15px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: $text;
								line-height: 25px;
								view{
									overflow: hidden;
									text-overflow:ellipsis;
									white-space: nowrap;
								}
								view:nth-child(1){
									display: flex;
									justify-content: space-between;
								}
							}
							.xx_rig{
								width: 100px;
								display: flex;
								justify-content: center;
								align-items: center;
								view{
									width: 60px;
									height: 30px;
									background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
									box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.1);
									border-radius: 40px;
									font-size: 16px;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									color: #FFFFFF;
									line-height: 30px;
									text-align: center;
								}
							}
						}
						.ddzt{
							position: absolute;
							top: 0;
							right: 0;
							width: 50px;
							height: 20px;
							border-radius: 0px 10px 0px 10px;
							opacity: 0.6;
							font-size: 12px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 20px;
							text-align: center;
						}
						.ddzt_xc{
							background: linear-gradient(232deg, #1B9A5D 0%, #1B9A5D 100%);
						}
						.ddzt_zc{
							background: linear-gradient(232deg, #B9D378 0%, #B9D378 100%);
						}
					}
				}
				.list_bots{
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: $mainText;
					line-height: 30px;
					text-align: center;
				}
			}
			
		}
	
</style>
